import { inject, onMounted } from "vue"
import { mapStore } from "@/store"

export const eventAdd = () => {
    const store = mapStore()
    let map
    onMounted(() => {
        // 获取地图
        map = inject('$map')
    })

    const add = () => {
        store.isAdd = false
        map.on('click', handleAdd)

    }

    function handleAdd(evt) {
        const { lng, lat } = evt.lngLat
        let center = [lng, lat]

        map.addLayer({
            id: 'event_point' + Date.now(),
            source: {
                type: "geojson",
                data: {
                    type: "FeatureCollection",
                    features: [
                        {
                            type: 'Feature',
                            geometry: {
                                type: "Point",
                                coordinates: center
                            },
                        }
                    ]
                }
            },
            type: 'symbol',
            layout: {
                'icon-image': 'custom-icon-2',
                'icon-size': 0.5,
            }
        })
        map.off('click', handleAdd)
        store.isAdd = true
        store.isAdded = true
    }

    return {
        add
    }
}